<template>
  <div class="endore-container yh-layout-box">
    <div class="endore-content-wrap">
      <div class="endore-list-con">
        <img src="@/assets/images/market/pop-supply.png" class="endore-list-pic"/>
        <h3>市场供应量大</h3>
        <p class="endore-p"><span class="fontMainColor">{{list.productIncrease}}</span> 件 新增商品</p>
        <p class="endore-p"><span class="fontMainColor">{{list.productCount}}</span> 件 累计商品</p>
      </div>
      <div class="endore-list-con">
        <img src="@/assets/images/market/pop-purchase.png" class="endore-list-pic"/>
        <h3>采购需求旺盛</h3>
        <p class="endore-p"><span class="fontYellow">{{list.orderIncrease}}</span> 笔 新增订单</p>
        <p class="endore-p"><span class="fontYellow">{{list.orderCount}}</span> 笔 累计订单</p>
      </div>
      <div class="endore-list-con">
        <img src="@/assets/images/market/pop-provider.png" class="endore-list-pic"/>
        <h3>严选供应商</h3>
        <p class="endore-p">一呼百应严格筛选供应商</p>
        <p class="endore-p">品质保障，放心采购</p>
      </div>
      <div class="endore-brand-item fl">
        <div class="endore-img-con">
          <div class="endore-img fl cursor" v-for="(item,index) in list.supplierList">
            <a :href="item.supplierLink" target="_blank">
              <img :src="URL.PIC+item.imageUrl" width="124" height="70"/>
            </a>
          </div>          
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import {getMarketVirtual} from '@/api/market'
export default {
  name: 'Endorse',
  props: ['marketId'],
  components: {
    
  },
  data() {
    return {
      list:[],
    }
  },
  created() {
    this.getMarketVirtual();
  },
  methods: {
    getMarketVirtual(){
      getMarketVirtual({marketId:this.marketId}).then(res=>{
          this.list = res.data;
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.endore-container{
  margin: 20px auto;
  .endore-content-wrap{
    width: 100%;
    height: 180px;
    background: #E9E9E9;
    border-radius: 10px;
    .endore-list-con{
      float: left;
      width: 240px;
      height: 180px;
      text-align: center;
      border-right: 1px solid #fff;
      .endore-list-pic{
        margin-top: 20px;
      }
      h3{
        font-size: 18px;
        color: #333;
        margin: 15px 0;
      }
      .endore-p{
        font-size: 14px;
        color: #888;
        margin: 10px 0;
        .fontMainColor{
          color: #59A4EB;
        }
        .fontYellow{
          color: #E3A142;
        }
      }
    }
    .endore-list-con:nth-child(3){
      border-right: none;
    }
    .endore-brand-item{
      width: 400px;
      margin-top: 30px;
      margin-left: 40px;
      .endore-img-con{
        overflow: hidden;
        zoom: 1;
        .endore-img{
          margin-right: 5px;
        }
      }
    }
  }
}
</style>
